<template>
  <div class="message-display__container">
    <!-- 文本 -->
    <template v-if="item.messageType === MessageType.TEXT">
      <div class="message-display__content" v-html="item.messageContent" />
    </template>
    <!-- 图片 -->
    <div
      v-else-if="
        item.messageType === MessageType.IMAGE ||
        item.messageType === MessageType.STICKER
      "
    >
      <el-image
        v-if="item.messageContentUrl"
        :class="mediaClass"
        :src="item.messageContentUrl"
        :preview-src-list="[item.messageContentUrl]"
        :preview-teleported="true"
        lazy
      />
    </div>
    <!-- 视频 -->
    <template
      v-else-if="
        item.messageType === MessageType.VIDEO ||
        item.messageType === MessageType.GIF
      "
    >
      <video
        v-if="item.messageType === MessageType.VIDEO"
        :src="item.messageContentUrl"
        :class="mediaClass"
        controls
      />
      <!-- GIF -->
      <video
        v-else-if="item.messageType === MessageType.GIF"
        :src="item.messageContentUrl"
        :class="mediaClass"
        loop
        autoplay
        controls
      />
    </template>
    <!-- 语音  -->
    <template
      v-else-if="
        item.messageType === MessageType.AUDIO ||
        item.messageType === MessageType.PTT
      "
    >
      <audio :src="item.messageContentUrl" controls class="material-w-40" />
      <div>
        <div class="message-display__file-name">{{ item.messageFileName }}</div>
      </div>
    </template>
    <!-- 名片 -->
    <div
      v-else-if="item.messageType === MessageType.CARD"
      class="message-display__card"
    >
      <div>{{ t("session.businessCard") }}</div>
      <div v-if="cardData">
        <div>{{ cardData.displayName }}</div>
        <div>{{ cardData.telNumber }}</div>
      </div>
    </div>
    <!-- 文件 -->
    <template v-else-if="item.messageType === MessageType.DOCUMENT">
      <el-link type="primary" :href="item.messageContentUrl" target="_blank">
        <div class="message-display__file">
          <div class="file-icon">📄</div>
          <span>{{ item.messageFileName || item.messageContentUrl }}</span>
        </div>
      </el-link>
    </template>
    <!-- 超链 -->
    <template v-else-if="item.messageType === MessageType.URL">
      <div class="message-display__link">
        <div v-if="linkData">
          <div class="link-title">{{ linkData.title }}</div>
          <div class="link-description">{{ linkData.description }}</div>
          <el-link :href="linkData.text" target="_blank">{{
            linkData.text
          }}</el-link>
        </div>
      </div>
    </template>
    <!-- 投票 -->
    <div
      v-else-if="item.messageType === MessageType.POLL"
      class="message-display__poll"
    >
      <div v-if="pollData">
        <div class="poll-title">{{ pollData.question }}</div>
        <div
          v-for="(option, index) in pollData.options"
          :key="index"
          class="poll-option"
        >
          {{ option }}
        </div>
      </div>
    </div>
    <!-- 其他未知类型 -->
    <div v-else>
      <span v-show="item.messageContentUrl || item.messageContent">
        {{ t("message.type.unknown") }}
      </span>
    </div>
    <div v-if="caption && item.fromType === 1" class="message-display__caption">
      {{ caption }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from "vue";
import { ElImage, ElLink } from "element-plus";
import {
  MessageType,
  type MessageItem,
  type CardInfo,
  type LinkInfo,
  type PollInfo,
} from "./types/index";

// 定义属性
const props = defineProps<{
  item: MessageItem;
  t?: (key: string) => string;
}>();

// 默认翻译函数
const t = props.t || ((key: string) => key);

const mediaClass = computed(() => {
  return props.item.fromType === undefined
    ? "message-display__media message-display__media--small"
    : props.item.fromType === 1
      ? "message-display__media message-display__media--large"
      : "message-display__media message-display__media--large";
});

const caption = computed(() => {
  const mediaTypes = [
    MessageType.IMAGE,
    MessageType.STICKER,
    MessageType.AUDIO,
    MessageType.VIDEO,
    MessageType.GIF,
  ];
  return mediaTypes.includes(props.item.messageType as any)
    ? props.item.messageContent
    : "";
});

// 解析不同类型的数据
const cardData = computed(() => {
  if (
    props.item.messageType === MessageType.CARD &&
    props.item.messageContent
  ) {
    try {
      return JSON.parse(props.item.messageContent) as CardInfo;
    } catch {
      return null;
    }
  }
  return null;
});

const linkData = computed(() => {
  if (props.item.messageType === MessageType.URL && props.item.messageContent) {
    try {
      return JSON.parse(props.item.messageContent) as LinkInfo;
    } catch {
      return null;
    }
  }
  return null;
});

const pollData = computed(() => {
  if (
    props.item.messageType === MessageType.POLL &&
    props.item.messageContent
  ) {
    try {
      return JSON.parse(props.item.messageContent) as PollInfo;
    } catch {
      return null;
    }
  }
  return null;
});
</script>

<style lang="scss" scoped>
.message-display {
  &__container {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
  }

  &__content {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
  }

  &__media {
    border-radius: 4px;

    &--small {
      width: 48px;
      height: 48px;
    }

    &--large {
      width: 128px;
      height: 128px;
    }
  }

  &__file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    .file-icon {
      font-size: 24px;
    }
  }

  &__file-name {
    font-size: 12px;
    color: #999;
    text-align: center;
    width: 160px;
  }

  &__card,
  &__poll,
  &__link {
    padding: 12px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
  }

  &__caption {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
  }
}

.material-w-40 {
  width: 160px;
}

.link-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.link-description {
  color: #666;
  margin-bottom: 8px;
  font-size: 12px;
}

.poll-title {
  font-weight: 600;
  margin-bottom: 12px;
}

.poll-option {
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f5f7fa;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
